<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<ul>
			<li>
				<div class="tac">
					<img src="img/fj2.jpg" />
				</div>
				<p>内容标题</p>
				<p>商品价格商品价格</p>
				<p>内容描述内容描述</p>
			</li>
			<li>
				<div class="tac">
					<img src="img/fj2.jpg" />
				</div>
				<p>内容标题</p>
				<p>商品价格商品价格</p>
				<p>内容描述内容描述</p>
			</li>
			<li>
				<div class="tac">
					<img src="img/fj2.jpg" />
				</div>
				<p>内容标题</p>
				<p>商品价格商品价格</p>
				<p>内容描述内容描述</p>
			</li>
			<li>
				<div class="tac">
					<img src="img/fj2.jpg" />
				</div>
				<p>内容标题</p>
				<p>商品价格商品价格</p>
				<p>内容描述内容描述</p>
			</li>
			<li>
				<div class="tac">
					<img src="img/fj2.jpg" />
				</div>
				<p>内容标题</p>
				<p>商品价格商品价格</p>
				<p>内容描述内容描述</p>
			</li>
			<li>
				<div class="tac">
					<img src="img/fj2.jpg" />
				</div>
				<p>内容标题</p>
				<p>商品价格商品价格</p>
				<p>内容描述内容描述</p>
			</li>
			<li>
				<div class="tac">
					<img src="img/fj2.jpg" />
				</div>
				<p>内容标题</p>
				<p>商品价格商品价格</p>
				<p>内容描述内容描述</p>
			</li>
			<li>
				<div class="tac">
					<img src="img/fj2.jpg" />
				</div>
				<p>内容标题</p>
				<p>商品价格商品价格</p>
				<p>内容描述内容描述</p>
			</li>
			<li class="fixed">&nbsp;</li>
			<li class="fixed">&nbsp;</li>
			<li class="fixed">&nbsp;</li>
			<li class="fixed">&nbsp;</li>
			<li class="fixed">&nbsp;</li>
		</ul>
	</body>

</html>

<style type="text/css">
	body {
		background: #efefef;
	}
	
	* {
		margin: 0;
		padding: 0;
	}
	
	.tac {
		text-align: center;
	}
	
	ul {
		list-style: none;
		width: 600px;
		margin: 10px auto;
		border: 1px solid green;
		padding: 20px;
		border-radius: 5px;
		/*消除li之间的空隙*/
		font-size: 0;
		/*两端对齐*/
		text-align: justify;
	}
	
	li {
		border: 1px solid #999;
		width: 150px;
		padding: 10px;
		border-radius: 5px;
		/*设置为inb*/
		display: inline-block;
		/*ul设置了字体为0,这里重新设置字体*/
		font-size: 16px;
	}
	
	li {
		margin-bottom: 10px;
	}
	
	img {
		height: 100px;
		width: 80%;
	}
	
	p {
		text-align: center;
		line-height: 1.5;
	}
	
	.fixed {
		border: none;
		height: 0;
		padding: 0 10px;
		margin: 0;
	}
</style>

<!--
1. 所有li设为inb(inline-block)
2. 给ul设置font-size为0,消除li之间的空隙
3. 设置ul的对齐方式设为jutify(两端对齐)
4. 给li设置宽度
5. 在末尾多添加几个空的li以解决最后一行不对齐的问题
-->